<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>考核管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../library/layui/css/layui.css" media="all">       <!-- layui依赖 -->
  <script type="text/javascript" src="../../library/layui/layui.js"></script>
  <script src="../../lib/axios.min.js"></script>                                     <!-- axios-->
  <script src="../../lib/vue.min.js"></script>                                       <!--vue依赖 -->
  <link rel="stylesheet" href="../../library/element-ui/lib/theme-chalk/index.css">  <!--elementui依赖 -->
  <script src="../../library/element-ui/lib/index.js"></script>
  <script src="./index.js" defer></script>                                           <!-- 使用 defer 确保在 DOM 加载后执行 -->
  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      height: 650px;
      position: relative; /* 使aside相对定位 */
    }

    .el-main {
      background-color: #E9EEF3;
      color: #444;
      text-align: center;
      line-height: 160px;
    }

    .el-table__header-wrapper {
      height: 0;   /*消除列名占用空间*/
      width: 100%;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">
        <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                @row-click="whenClick"
                style="width: 100%">
          <el-table-column
                  prop="CNAME"
                  label="菜单"
                  width="200px">
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
          <el-button @click="setCurrent()">取消选择</el-button>
        </div>
      </el-aside>
      <el-main>
        <el-button @click="openDrawer" type="primary" style="margin-left: 16px;">
          点我打开
        </el-button>

        <el-drawer
                title="二级菜单"
                :visible.sync="drawer"
                :with-header="false"
                :append-to-body="false"
                direction="right">
          <div v-if="selectedMenu">
            <h3>{{ selectedMenu.CNAME }} 的二级菜单</h3>
            <ul>
              <li v-for="item in selectedMenu.subMenu" :key="item.id">{{ item.name }}</li>
            </ul>
          </div>
          <div v-else>
            <span>请先选择一个菜单项</span>
          </div>
        </el-drawer>
      </el-main>
    </el-container>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        drawer: false,
        selectedMenu: null,
        tableData: [
          { CNAME: '菜单1', subMenu: [{ id: 1, name: '子菜单1-1' }, { id: 2, name: '子菜单1-2' }] },
          { CNAME: '菜单2', subMenu: [{ id: 3, name: '子菜单2-1' }, { id: 4, name: '子菜单2-2' }] },
          { CNAME: '菜单3', subMenu: [{ id: 5, name: '子菜单3-1' }, { id: 6, name: '子菜单3-2' }] }
        ]
      };
    },
    methods: {
      setCurrent(row) {
        this.selectedMenu = row; // 设置当前选中的菜单
      },
      openDrawer() {
        if (this.selectedMenu) {
          this.drawer = true; // 打开抽屉
        } else {
          this.$message.warning('请先选择一个菜单项'); // 提示用户选择菜单
        }
      },
      handleCurrentChange(row) {
        // 处理当前行变化的逻辑
        this.selectedMenu = row; // 更新选中的菜单
      },
      whenClick(row) {
        // 处理行点击的逻辑
        this.selectedMenu = row; // 更新选中的菜单
      }
    }
  });
</script>
</body>
</html>
